<template>
    <div class="login c-s-100 c-layout-v c-center-center">
        <a-form
            class="form c-b"
            :color="'primary'"
            :labelAlign="'right'"
            ref="form"
        >
            <h2>XXX后台管理系统 - 登录</h2>
            <hr />

            <a-form-item class="c-m-t-xl" :label="form.accountType.label">
                <a-input-select
                    v-model:value="form.accountType.value"
                    :rules="form.accountType.rules"
                    :items="form.accountType.items"
                ></a-input-select>
            </a-form-item>
            <a-form-item
                class="c-m-t-xl"
                :label="form.account.label"
                :tips="form.account.tips"
            >
                <a-input-string
                    v-model:value="form.account.value"
                    :rules="form.account.rules"
                ></a-input-string>
            </a-form-item>
            <a-form-item class="c-m-t-xl" :label="form.password.label">
                <a-input-string
                    v-model:value="form.password.value"
                    :rules="form.password.rules"
                ></a-input-string>
            </a-form-item>

            <div class="c-m-t-m c-layout-h c-f-p-end">
                <a-button @click="submit" :color="'primary'" :loading="loading"
                    >登录</a-button
                >
            </div>
        </a-form>
    </div>
</template>

<style lang="scss" scoped>
.login {
    .form {
        width: 500px;
        padding: 50px;
        background-color: white;
    }
}
</style>

<script>
import utils from '../../common/utils'

export default {
    data() {
        return {
            form: {
                account: {
                    label: '账号',
                    value: null,
                    rules: [
                        { name: 'required', value: true },
                        { name: 'maxLength', value: 45 },
                    ],
                    tips: '不可为空哦',
                },
                password: {
                    label: '密码',
                    value: null,
                    rules: [
                        { name: 'required', value: true }
                    ],
                },
                accountType: {
                    label: '账号类型',
                    value: null,
                    rules: [
                        { name: 'required', value: true }
                    ],
                    items: [
                        { text: '邮箱', value: 0 },
                        { text: '手机号', value: 1 },
                    ]
                }
            },
            loading: false,
            labelWidth: 100
        }
    },
    methods: {
        async submit() {
            this.loading = true
            let valid = await this.$refs.form.isValid()
            if (!valid) {
                this.loading = false
                console.log('请先纠正表单错误')
                return
            }
            await utils.sleep(1000)
            console.log('登录成功')
            this.loading = false
        }
    }
}
</script>